<template>
  <el-container>
    <el-header>
      <el-menu :default-active="$route.path" router mode="horizontal">
        <el-menu-item><img  style="position: absolute;width: 125px;margin-top: 10px;" src="../assets/img.png" @click="toHomePage()" alt></el-menu-item>
        <el-menu-item style="margin-left: 200px;font-size: 17px;color: #2874cb;padding-top: 25px;">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{path: '/mainPage'}">我的课堂</el-breadcrumb-item>
            <el-breadcrumb-item :to="{path: '/classDetail'}">课程内容</el-breadcrumb-item>
            <el-breadcrumb-item>作业详情</el-breadcrumb-item>
          </el-breadcrumb>
        </el-menu-item>
        <div class="h-right">
          <div style="float: left;"><a href="https://ktp.paper880.com/" style="text-decoration: none;color: black;"><i class="el-icon-search"></i>论文查重</a></div>
          <div>
            <span style="margin-left: 25px;cursor:pointer;" @click="toTaskManagement"><i class="el-icon-document"></i>任务管理</span>
            <span style="margin: 0 12px;"><i class="el-icon-bell"></i></span>欢迎您,
            <el-dropdown>
              <span class="el-dropdown-link"><i class="el-icon-s-custom"></i>{{this.userInfo.name}}</span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item><span @click="goSettings()"><i class="el-icon-s-tools"></i>个人设置</span></el-dropdown-item>
                <el-dropdown-item><span @click="logout()"><i class="el-icon-remove"></i>退出登录</span></el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </el-menu>
    </el-header>
    <el-main>
      <div class="view-homework">
        <div class="is-top">
          <el-tabs v-model="activeName" style="width: 125px;">
            <el-tab-pane label="详情" style="font-size: 25px" name="first"></el-tab-pane>
            <el-tab-pane  v-if="userInfo.role ==='老师'" label="批阅" style="font-size: 25px" name="third"></el-tab-pane>
            <el-tab-pane  v-if="userInfo.role ==='学生'" label="提交作业" style="font-size: 25px" name="second"></el-tab-pane>
          </el-tabs>
          <div v-if="activeName === 'first'">
            <div class="homework-submit">
              <div class="homework-label"><span style="margin:15px 5px;">作业</span></div>
              <div class="homework-info">{{homework.title}}</div>
              <div class="homework-info">{{homework.content}}</div>
              <div class="homework-info" style="margin-top: -20px;">提交起止时间:{{createTime}}~{{endTime}}</div>
              <div class="homework-info">
                上传word或PDF作业文件
                <el-icon class="el-icon-download" style="width: 25px;margin-left: 25px;font-size:25px;color:blue;"></el-icon><a :href="'http://localhost:8081/files/' + this.homework.attachment" style="font-size: 25px;text-decoration: none;" download="">附件</a>
              </div>
            </div>
            <div style="margin-top: 25px;margin-bottom: 81px">
              <span style="font-size: 25px;">全部评论&nbsp</span>
              <span style="color: #e8e3e3">共{{comments.length}}条</span>
              <div class="text-area">
                <textarea name="" id="" cols="163" rows="8" placeholder="说点什么吧" v-model="comment"></textarea>
                <div><el-button class="el-button--primary" style="float: right;margin-right: 105px;margin-top: 25px;" @click="addComment()">发表评论</el-button></div>
              </div>
            </div>
            <div v-for="comment in comments">
                <img :src="'http://localhost:8081/files/' + comment.avatar" style="width: 50px;border-radius: 50%;" class="avatar">
                <span style="margin-top: -100px;"><p>{{comment.name}}:{{comment.evaluation}}&nbsp&nbsp&nbsp&nbsp   {{comment.commentTime}}</p></span>
            </div>
          </div>
          <div v-if="activeName === 'second'">
            <div class="student-submit">
              <div class="detail-header">
                <div class="layout-left">
                  <img src="https://www.ketangpai.com/images/web2x_zuoye.png" alt>
                  <div class="another-name"><span class="label-type">作业</span></div>
                </div>
                <div class="layout-right">
                  <header style="margin-bottom: 0;">
                    <div class="title">
                      <h4>{{homework.title}}</h4>
                    </div>
                  </header>
                  <div class="tags" style="margin-top: -2px">
                    <span class="el-tag el-tag--mini el-tag--light">个人作业</span>
                    <span class="el-tag el-tag--mini el-tag--light">提交起止时间:{{createTime}}~{{endTime}}</span>
                    <span class="tag-gray el-tag el-tag--info el-tag--mini el-tag--light">100分</span>
                    <span class="tag-gray el-tag el-tag--info el-tag--mini el-tag--light">查重</span>
                  </div>
                </div>
                <hr>
              </div>
              <div class="submit-content">
                <div class="flex-between">
                  <span class="font25">
                    提交内容
                  </span>
                  <div style="float: right">
                    <button class="el-button el-tooltip el-button--text el-button--medium">
                      <i class="el-icon-circle-plus-outline"></i>
                      <span>重交作业</span>
                    </button>
                    <button type="button" class="el-button el-button--default el-button--medium">查重结果</button>
                    <button type="button" class="el-button el-button--primary el-button--medium" @click="submitAssignment(homeworkId)">提交作业</button>
                  </div>
                </div>
                <div class="content">
                  <div class="tea-comment">
                    <div class="left">
                      <p class="mb16" style="font-size: 16px;">老师评分</p>
                      <div v-if="submitHomework.score === null" class="tea-text" style="font-size: 14px;">暂无</div>
                      <div v-else class="tea-text" style="font-size: 14px;">{{submitHomework.score}}</div>
                    </div>
                    <div class="right">
                      <p style="font-size: 25px;color: rgb(66,133,244);margin-top:40px;">{{submitHomework.status}}</p>
                    </div>
                  </div>
                  <div class="annex-box">
                    <div class="title" style="font-size: 16px;">
                      作业附件
                      <span style="font-size: 12px;color: darkgray">1个</span>
                    </div>
                    <div v-if="submitHomework.status === '未提交'">
                    <el-upload
                      class="upload-demo"
                      style="margin: -22px 35%;"
                      drag
                      action="http://localhost:8081/files/upload"
                      :on-success="handleFileSuccess"
                      multiple>
                      <i class="el-icon-upload"></i>
                      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    </el-upload>
                    </div>
                    <div v-else class="attachment">
                      <div class="flex-align file">
                        <div><img src="https://assets.ketangpai.com/openapiv5/Public/Common/img/fileicon/file_ext_big_doc.png" style="float:left;width: 25px;"></div>
                        <div>
                          <h3 style="float: left;margin: 2px 25px;">作业名称:{{fileName}}</h3>
                          <div style="padding: 5px">{{Math.round((fileSize/1024)*100)/100}}kb</div>
                        </div>
                      </div>
                      <div class="opt">
                        <div>
                          <button type="button" class="el-button el-button--text" style="float: right;margin-top: -25px">
                            <a :href="'http://localhost:8081/files/'+ submitHomework.submitAttachment" style="text-decoration: none;color: #2874cb" download="">下载</a>
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-if="activeName === 'third'">
            <el-table
              :data="tableData"
              style="width: 100%">
              <el-table-column
                label="提交时间"
                width="250">
                <template slot-scope="scope">
                  <i class="el-icon-time"></i>
                  <span style="margin-left: 10px">{{ scope.row.submitTime }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="学号"
                width="250">
                <template slot-scope="scope">
                  <span>{{scope.row.stuId}}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="姓名"
                width="200">
                <template slot-scope="scope">
                  <span>{{scope.row.homeworkMessage}}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="附件"
                width="300">
                <template slot-scope="scope">
                  <a :href="'http://localhost:8081/files/'+ scope.row.submitAttachment" style="font-size: 15px;text-decoration: none;" download="">{{scope.row.attachmentName}}</a>
                </template>
              </el-table-column>
              <el-table-column
                label="得分"
                width="150">
                <template slot-scope="scope">
                  <span>{{scope.row.score}}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button type="success" style="margin-left: -10px;"
                    @click="giveScore(scope.row.stuId)">打分</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import axios from "axios";
import moment from "moment";

export default {
  name: "homework",
  data(){
    return{
      userInfo: null,
      activeName: 'first',
      homeworkId: '',
      homework: '',
      submitHomework: '',
      createTime: '',
      endTime: '',
      tableData: [],
      fileName: '',
      fileSize: '',
      comment: '',
      comments: []
    }
  },
  methods: {
    addComment(){
      let ID = this.userInfo.id;
      if(this.userInfo.role === '学生'){
        ID = this.userInfo.stuId;
      }
      axios.post("http://localhost:8081/homework/addComment",{
        homeworkId: this.homeworkId,
        role: this.userInfo.role,
        userId: ID,
        evaluation: this.comment,
        commentTime: this.formattedDate(new Date()),
        name: this.userInfo.name,
        avatar: this.userInfo.avatar
      }).then(response =>{
        if(response.status === 200){
          axios.post("http://localhost:8081/homework/queryComments",{
            homeworkId: this.homeworkId
          }).then(response => {
            if(response.status === 200)
              this.comments = response.data;
            }
          )
        }
      })
    },
    giveScore(studentId){
      this.$prompt('请输入分数', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^([1-9][0-9]?|100|0)$/,
        inputErrorMessage: '输入不正确'
      }).then(({ value }) => {
        this.$message({
          type: 'success',
          message: '输入得分: ' + value
        });
        axios.post("http://localhost:8081/homework/scoring",{
          stuId: studentId,
          assigningHomeworkId: this.homeworkId,
          score: value
        }).then(response=>{
          if(response.status === 200){}
          axios.post("http://localhost:8081/homework/selectSubmitHomeworkByStatus",{
            status: '已提交',
            assigningHomeworkId: this.homeworkId
          }).then(response => {
            if (response.status === 200) {
              this.tableData = response.data;
            } else {
              console.error("Response Data is null.")
            }
          })
          }
        )
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    submitAssignment(homeworkId){
      axios.post("http://localhost:8081/homework/submit",{
        status: '已提交',
        stuId: this.userInfo.stuId,
        assigningHomeworkId: this.homeworkId,
        submitTime: this.formattedDate(new Date()),
        homeworkMessage: this.userInfo.name
      })
        .then(response =>{
        if(response.status === 200) {
          this.$message.success("提交成功!");
          axios.post("http://localhost:8081/homework/selectSubmitHomeworkById",{
            stuId: this.userInfo.stuId,
            assigningHomeworkId: this.homeworkId,
          }).then(response =>{
            if(response.status === 200){
              this.submitHomework = response.data;
            }else{
              console.error("Response Data is null.")
            }
          })
        }
      })
    },
    toHomePage() {
      this.$router.push("/homePage")
    },
    toTaskManagement(){
      this.$router.push("/taskManagement")
    },
    goSettings() {
      this.$router.push("/settings")
    },
    logout() {
      localStorage.removeItem('userInfo')
      this.$router.push("/login")
    },
    formattedDate(date){
      return moment(date).format('YYYY/MM/DD HH:mm:ss');
    },
    handleFileSuccess(res,file) {
      this.submitHomework.submitAttachment = res.data;
      this.fileName = file.name;
      this.fileSize = file.size;
      axios.post("http://localhost:8081/homework/uploadFile",{
        stuId: this.userInfo.stuId,
        assigningHomeworkId: this.homeworkId,
        submitAttachment: this.submitHomework.submitAttachment,
        attachmentName: this.fileName
      }).then(response =>{
        if(response.status === 200){
          this.$message.success("上传文件成功!")
        }
      })
    },
  },
  mounted() {
    // 在组件加载时从LocalStorage中获取用户信息
    const userInfoString = localStorage.getItem('userInfo');
    if (userInfoString) {
      this.userInfo = JSON.parse(userInfoString);
    }
    this.homeworkId = this.$route.params.homeworkId;
    axios.post("http://localhost:8081/homework/selectHomeworkById",{
      id: this.homeworkId
    }).then(response =>{
      if(response.status === 200){
        this.homework = response.data;
        this.createTime = this.formattedDate(this.homework.createTime);
        this.endTime = this.formattedDate(this.homework.endTime);
      }else{
        this.$message.error("未查询到作业信息");
      }
    })
    axios.post("http://localhost:8081/homework/selectSubmitHomeworkById",{
      stuId: this.userInfo.stuId,
      assigningHomeworkId: this.homeworkId,
    }).then(response =>{
      if(response.status === 200){
      this.submitHomework = response.data;
      }else{
        console.error("Response Data is null.")
      }
    })
    axios.post("http://localhost:8081/homework/selectSubmitHomeworkByStatus",{
      status: '已提交',
      assigningHomeworkId: this.homeworkId
    }).then(response => {
      if (response.status === 200) {
        this.tableData = response.data;
      } else {
        console.error("Response Data is null.")
      }
    })
    axios.post("http://localhost:8081/homework/queryComments",{
      homeworkId: this.homeworkId
    }).then(response => {
        if(response.status === 200)
          this.comments = response.data;
      }
    )
  }
}
</script>

<style scoped>
.attachment{
  border: 1px solid #dadce0;
  width: 1200px;
  margin: 25px 25px;
  border-radius: 5px;
  padding: 25px 25px;
}
.title{
  margin: 2px 25px;
  height: 21px;
}
.annex-box{
  width: 1300px;
  height: 181px;
  margin-bottom: -2px;
  background-color: #ffffff;
}
.tea-text{
  width: 850px;
  height: 40px;
  padding-top: 25px;
  padding-left: 25px;
  background-color: #ffffff;
  border-radius: 10px;
}
.mb16{
  width: 1000px;
  height: 21px;
}
.left{
  width: 960px;
  margin-left: 25px;
  height: 88px;
  float: left;
}
.right{
  margin-left: 25px;
  padding-top: 25px;
  width: 250px;
  height: 88px;
  float: left;
}
.tea-comment{
  width: 1300px;
  height: 135px;
}
.content{
  width: 1300px;
  height: 320px;
  margin-top: 22px;
  border-radius: 5px;
  border: 1px solid #dadce0;
  background-color: #f8f9fa;
}
.font25{
  font-size: 25px;
  width: 160px;
  height: 38px;
}
.flex-between{
  width: 1300px;
  height: 38px;
  background-color: #ffffff;
}
.submit-content{
  margin-top: 25px;
  width: 1300px;
  height: 380px;
  background-color: #fafafa;
}
.layout-right{
  width: 1089px;
  height: 79px;
}
.label-type{
  margin-left: 7px;
  width: 26px;
  height: 15px;
}
.another-name{
  width: 85px;
  height: 18px;
}
.layout-left{
  width: 85px;
  height: 79px;
  float: left;
}
.text-area{
  margin-top: 25px;
}
.homework-info{
  margin: 25px 10px;
}
.homework-label{
  width: 49px;
  height: 36px;
  background-color: #31ccd2;
  border-radius: 4px;
  color: #fafafa;
}
.homework-submit{
  width: 1200px;
  height: 250px;
  border-radius: 5px;
  border: 1px solid darkgrey;
}
.view-homework{
  background-color: white;
  margin: 25px 80px;
  width: 1300px;
}
.h-right{
  float: right;
  width: 490px;
  margin-top: 25px;
  font-size: 17px;
}
.el-dropdown-link{
  cursor:pointer;
  color: #409EFF;
}
</style>
